<template>
  <div class="proper-manage-com-baseinfo">
    <!-- 基本信息 -->
    <secDescriptions
      :data="formConfig.data"
      :colon="true"
      :labelStyle="{ width: '100px', 'text-align': 'right', 'line-height': '36px' }"
      :contentStyle="{ 'line-height': '36px' }"
      :column="3"
      :border="false"
      :keyData="formConfig.baseInfo"
      title="基础信息"
    >
    </secDescriptions>

    <secDescriptions
      :data="formConfig.data"
      :colon="true"
      :labelStyle="{ width: '100px', 'text-align': 'right', 'line-height': '36px' }"
      :contentStyle="{ 'line-height': '36px' }"
      :column="3"
      :border="false"
      :keyData="formConfig.per"
      title="权属信息"
    >
    </secDescriptions>
    <div class="cls title">
      资产标签&nbsp;
      <el-button
        v-if="formConfig.data.editTagFlag == 1 ? true : false"
        style="margin: 0 10px"
        @click="opTagDialog()"
        size="mini"
        plain
        icon="el-icon-plus"
        >标签</el-button
      >
    </div>
    <!-- formConfig.data.tagList -->
    <ul class="ul-box clearfix">
      <li v-for="tag in formConfig.data.tagList" :key="tag.tagCode">
        <el-tooltip class="item" effect="dark" placement="top">
          <div slot="content">
            <p>资产标签:{{ tag.tagName }}</p>
            <p>标签备注:{{ tag.tagRemark }}</p>
            <p>打标备注:{{ tag.remark }}</p>
          </div>
          <!--  -->
          <el-tag
            :closable="tag.edited == '1' && formConfig.data.editTagFlag == 1 ? true : false"
            :type="tag.tagStatus == '0' ? 'danger' : ''"
            @close="closeTag(tag)"
            >{{ tag.tagName }}</el-tag
          >
        </el-tooltip>
      </li>
    </ul>
    <div class="cls title">数据资产</div>
    <sec-table style="margin: 20px 0" :tableData="hiveList.rows" :tableCol="hiveList.cols"></sec-table>
    <secDescriptions
      :data="formConfig.data"
      :colon="true"
      :labelStyle="{ width: '100px', 'text-align': 'right', 'line-height': '36px' }"
      :contentStyle="{ 'line-height': '36px' }"
      :column="3"
      :border="false"
      :keyData="formConfig.risk"
      title="风险信息"
    >
    </secDescriptions>

    <secDescriptions
      :data="formConfig.data"
      :colon="true"
      :labelStyle="{ width: '100px', 'text-align': 'right', 'line-height': '36px' }"
      :contentStyle="{ 'line-height': '36px' }"
      :column="3"
      :border="false"
      :keyData="formConfig.other"
      title="其他信息"
    >
      <template v-slot:gitList>
        <el-tag v-for="(item, index) in formConfig.data.gitList" style="margin: 0 5px 5px 0" :key="index">{{
          item
        }}</el-tag>
      </template>
      <template v-slot:odinList>
        <el-tag v-for="(item, index) in formConfig.data.odinList" style="margin: 0 5px 5px 0" :key="index">{{
          item
        }}</el-tag>
      </template>
    </secDescriptions>

    <el-dialog title="资产打标" :visible.sync="tagsDialog" width="50%" ref="opdialog">
      <el-form :model="fromDialog" :rules="formRules" ref="opFormRef" label-width="100px" class="demo-ruleForm">
        <el-form-item label="标签名称" prop="labelName">
          <el-select v-model="fromDialog.labelName" placeholder="请选择" multiple filterable>
            <el-option
              v-for="item in labelOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="打标备注" prop="labelRemark">
          <el-input type="textarea" :maxlength="200" v-model="fromDialog.labelRemark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="clearTagDialog">取 消</el-button>
        <el-button type="primary" @click="checksureTagDialog">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import secDescriptions from "components/descriptions/myDescriptions";
import { tagsDeleteApi, tagsAddApi } from "api/propertyManage";
import { tagAllTagsApi } from "api/configApi";
export default {
  props: {
    formData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  components: {
    secDescriptions,
  },
  watch: {
    formData: {
      deep: true,
      immediate: true,
      handler(newVal) {
        this.formConfig.data = newVal;
        this.hiveList.rows = this.formConfig.data.hiveList || [];
      },
    },
  },
  computed: {},
  data() {
    return {
      labelOptions: [],
      tagsDialog: false,
      fromDialog: {
        opType: "",
        remark: "",
        labelName: [],
        labelRemark: "",
      },
      formRules: {
        labelName: [{ required: true, message: "请输入标签名称", trigger: "blur" }],
      },
      hiveList: {
        rows: [],
        cols: [
          { label: "库名", prop: "dbName", placeholder: "请输入库名（hive）" },
          { label: "表名", prop: "tableName", placeholder: "请输入hive表名（多个表之间用，隔开）" },
        ],
      },
      formConfig: {
        // 弹窗按钮

        data: {},
        baseInfo: [
          {
            label: "资产来源",
            prop: "source",
            formatter: (data) => {
              return this.utils.getDicLabel("100100", data.source);
            },
          },
          { label: "资产ID", prop: "id" },
          { label: "域名", prop: "domain" },
          { label: "系统名称", prop: "domainName" },
          {
            label: "资产级别",
            prop: "importSystem",
            formatter: (data) => {
              return this.utils.getDicLabel("100400", data.importSystem);
            },
          },
          {
            label: "资产类型",
            prop: "scanDev",
            formatter: (data) => {
              return this.utils.getDicLabel("scanDev", data.scanDev);
            },
          },
          {
            label: "资产状态",
            prop: "status",
            formatter: (data) => {
              return this.utils.getDicLabel(100500, data.status);
            },
          },
          {
            label: "访问性",
            prop: "netDev",
            formatter: (data) => {
              return this.utils.getDicLabel(100200, data.netDev);
            },
          },
          { label: "录入时间", prop: "createTimeText" },
          { label: "系统简介", prop: "extraData", span: 24 },
          { label: "备注", prop: "remark1", span: 24 },

          //    { label: "场景名称", prop: "sceneName" },
        ],
        per: [
          { label: "权属负责人", prop: "leaderName" },
          { label: "BP", prop: "bp" },
          {
            label: "PM",
            prop: "pmUsers",
            formatter: (data) => {
              let pmUsers = data.pmUsers;
              if (Array.isArray(pmUsers)) {
                return pmUsers.map((e) => e.account).join(",");
              }
              return pmUsers;
              // return this.utils.getDicLabel(101004, data.required);
            },
          },
          {
            label: "项目关注人",
            prop: "noticeUsers",
            formatter: (data) => {
              let noticeUsers = data.noticeUsers;
              if (Array.isArray(noticeUsers)) {
                return noticeUsers.map((e) => e.account).join(",");
              }
              return noticeUsers;
              // return this.utils.getDicLabel(101004, data.required);
            },
          },
          //todo

          { label: "创建人", prop: "creator" },
          { label: "权属部门", prop: "dept2" },
          {
            label: "业务线",
            prop: "followBusinessLineInfo",
            formatter: (data) => {
              let result = "";
              let followBusinessLineInfo = data.followBusinessLineInfo;
              if (Array.isArray(followBusinessLineInfo)) {
                result = followBusinessLineInfo.map((e) => e.businessLine).join(",");
              }
              let businessLineInfo = data.businessLineInfo;
              if (businessLineInfo.businessLine && businessLineInfo.businessLineId) {
                result = businessLineInfo.businessLine + "," + result;
              }
              if (result) {
                if (result.charAt(result.length - 1) == ",") {
                  result = result.substr(0, result.length - 1);
                }
              }
              return result;
              // return this.utils.getDicLabel(101004, data.required);
            },
          },
        ],
        risk: [
          { label: "待处理风险", prop: "riskNum" },
          { label: "已处理风险", prop: "riskDoneNum" },
          { label: "敏感时间", prop: "intervalDate" },
          { label: "敏感间隔(天)", prop: "intervalDays" },
        ],
        other: [
          { type: "slot", label: "git地址", prop: "gitList", span: 3 },
          { type: "slot", label: "odin地址", prop: "odinList", span: 3 },
          { label: "集群环境", prop: "cluster" },
          { label: "国家码", prop: "ctCode" },
        ],
      },
    };
  },
  mounted() {},
  methods: {
    closeTag(tag) {
      console.log(tag);
      let { id } = this.formConfig.data;
      this.utils.$confirm({ content: `是否确认删除该指标（${tag.tagName}）` }, () => {
        tagsDeleteApi({ assetId: id, tagCode: tag.tagCode }).then((res) => {
          let state = this.message.state(res);
          if (!state) return;
          this.$emit("closeTag");
        });
      });
    },
    getDicLabel(dicType, dicVal) {
      let dicLabel = "";
      try {
        dicLabel = this.$store.state.dictionary[dicType].filter((e) => e.value == dicVal)[0].label;
      } catch (error) {}
      return dicLabel;
    },
    opTagDialog() {
      // 打开弹窗
      this.tagsDialog = true;
      let { id } = this.formConfig.data;
      //获取所有的标签名称
      tagAllTagsApi({
        assetId: id,
      }).then((res) => {
        let data = res.data || [];
        console.log("data", data);
        this.labelOptions = [];
        data.forEach((item) => {
          let obj = { label: item.tagName, value: item.tagCode, disabled: item.selected == 1 || item.edited == "0" };
          this.labelOptions.push(obj);
        });
        console.log(this.labelOptions);
      });
    },
    clearTagDialog() {
      this.tagsDialog = false;
      // 清除数据
      this.fromDialog.labelName = "";
      this.fromDialog.labelRemark = "";
    },
    checksureTagDialog() {
      this.$refs["opFormRef"].validate((valid) => {
        if (valid) {
          this.sureTagDialog();
        }
      });
    },
    sureTagDialog() {
      let assetId = this.formConfig.data.id;
      console.log("data111", this.formConfig.data);
      let { labelRemark, labelName } = this.fromDialog;
      tagsAddApi([
        {
          assetId: assetId,
          tagCodeList: labelName,
          remark: labelRemark,
        },
      ]).then((res) => {
        let state = this.message.state(res);
        if (!state) {
          return;
        }
        this.tagsDialog = false;
        // 清除数据
        this.fromDialog.labelName = "";
        this.fromDialog.labelRemark = "";
        // 执行搜索
        this.$emit("closeTag");
        // this.handleView(this.formConfig.data);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.proper-manage-com-baseinfo {
  .el-form-item__label {
    font-size: 14px;
  }
}
.ul-box {
  li {
    float: left;
    padding: 5px 10px;
  }
}
</style>
